<template>
  <view>
	<view class="message_header">
		<!-- <span class="title_img"></span> -->
		<image class="item_img" :src="services[this.currentIndex].img" mode="widthFix"></image>
		<view style="font-size: 40upx; color: #666;">{{services[this.currentIndex].name}}</view>
	</view>
	<!-- <view class="container_tab" style="box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);">
		<view class="container_item" :class="item.id===TabCur?'current':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect(item.id)">
			<span class="item_title">{{item.catName}}</span>
		</view>
	</view> -->
	<view class="message_list" v-if="tabList && tabList.list">
		<view class="message_list_item" v-for="(item, index) in tabList && tabList.list " :key="index" @click="toArticle(item.link)" >
			<image class="message_list_img" :src="item.image"></image>
			<view class="message_list_one">
				<view class="message_list_title">{{item.title}}</view>
				<view class="message_list_content">{{item.content}}</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
	data() {
		return {
			// tabs: [{id: 0, catName: '家风'}, {id: 1, catName: '家道'}, {id: 2, catName: '家学'},],
			currentIndex: 0,
			TabCur: 0,
			tabLists: [
				{
					name: '家政',
					list: [
						{
							image: '../../static/message/1.jpeg',
							title: '品味人生|我们如何来到这个世界',
							content: '认知生命，方能成就人生',
							link: 'https://mp.weixin.qq.com/s/Tp1hDTnMkVi7-EMezjtZzA',
							creatTime: '16:01',
						},{
							image: '../../static/message/2.jpeg',
							title: '心说家政 | 望子成龙',
							content: '承经典， 眼光远， 心大义，育优良，送前线，保国安',
							link: 'https://mp.weixin.qq.com/s/PMpGBXOBheLxRxj3hpNr4g',
							creatTime: '15:01',	
					}]
				},
				{
					name: '教育',
					list: [
						{
							image: '../../static/message/3.jpeg',
							title: '心说家政 | 爱子有道 教子有方',
							content: '教育孩子，依道而行，尊重每一个生命',
							link: 'https://mp.weixin.qq.com/s/HULt7yYbiwOG9vupK52pXA',
							creatTime: '14:01',	
						},
						{
							image: '../../static/message/4.jpeg',
							title: '人类智慧 | 融于万物自然为师',
							content: '万物皆备于我矣。反身而诚，乐莫大焉。',
							link: 'https://mp.weixin.qq.com/s/zdr2Y8T6rMlz9amdZZErMQ',
							creatTime: '14:01',	
						},
						]
				},
				{
					name: '文化',
					list: [
						{
							image: '../../static/message/5.jpeg',
							title: '品味人生 | 开发自我 升华生命',
							content: '一个人的生命价值有限，如何在有限的生命里实现更大的价值？',
							link: 'https://mp.weixin.qq.com/s/mzugoCOcnryC8p5ogKPGTg',
							creatTime: '16:01',
						},{
							image: '../../static/message/6.jpeg',
							title: '中华民族 | 铁血丹心 铸就民族魂',
							content: '民族魂，是一个民族的精髓，是民族存在的精神支柱。',
							link: 'https://mp.weixin.qq.com/s/j0MzSchkWmjvi8hTWO-2cA',
							creatTime: '14:01',	
						}]
				},
				{
					name: '旅游',
					list: [
						{
							image: '../../static/message/7.jpeg',
							title: '游学| 发现不一样的精彩！',
							content: '游学是世界各国，各民族各文明中最为传统的一种学习教育方式',
							link: 'https://mp.weixin.qq.com/s/tfLz5-2l5LdTQrqM6WV7rw',
							creatTime: '16:01',
						},{
							image: '../../static/message/8.jpeg',
							title: '我以中华心， 扎根大西北',
							content: '徒步万里山川，览河岳之壮美；考察百姓生活，明祖国发展之需要；触摸千年长城，品味中华历史之厚重',
							link: 'https://mp.weixin.qq.com/s/4UFJathqNkS7QeOmfshahg',
							creatTime: '14:01',	
						}]
				},
				{
					name: '事业',
					list: [
						{
							image: '../../static/message/9.jpeg',
							title: '企业管理 | 欲为龙象 先做牛马',
							content: '企业的社会责任？',
							link: 'https://mp.weixin.qq.com/s/ouhWYQe_c9PVvivBcIeZrA',
							creatTime: '16:01',
						},{
							image: '../../static/message/10.jpg',
							title: '企业管理|全员学习 打造企业竞争力',
							content: '在“知识经济”时代，企业的学习力代表了企业的未来...',
							link: 'https://mp.weixin.qq.com/s/wHs-JYOQ8HaejX_f-pFxow',
							creatTime: '14:01',	
						}]
				},
				{
					name: '健康',
					list: [
						{
							image: '../../static/message/11.jpeg',
							title: '五味',
							content: '一粥一饭当思来之不易，一颗一粒应知食之有味。',
							link: 'https://mp.weixin.qq.com/s/uO0rMReCu7GGW5HtDGmdJg',
							creatTime: '13:01',
						},{
							image: '../../static/message/12.jpeg',
							title: '千言万语，不如吃饭',
							content: '人间烟火味，最抚慰人心；千言万语，不如吃饭.',
							link: 'https://mp.weixin.qq.com/s/5qnhOpoYwEPTPyqwkUkndQ',
							creatTime: '14:01',	
						}]
				},
				{
					name: '公益',
					list: [
						{
							image: '../../static/message/13.jpeg',
							title: '公益创业 | 以百姓心为心的唐太宗',
							content: '圣人无常心，以百姓心为心',
							link: 'https://mp.weixin.qq.com/s/CBs4onytQWUMxTbDcSm_Bw',
							creatTime: '16:01',
						},{
							image: '../../static/message/14.jpeg',
							title: '社团发展 | 公益与慈善的区别',
							content: '提高人口质量，应该成为做公益最根本的着手点.',
							link: 'https://mp.weixin.qq.com/s/kHm0WFsrhA7erOnI5bkvSw',
							creatTime: '14:01',	
						}]
				},
				{
					name: '理财',
					list: [
						{
							image: '../../static/message/15.jpeg',
							title: '家庭政治 | 花钱的学问',
							content: '生活点滴成习惯，懂花钱赢得尊重，会花钱赢得未来。',
							link: 'https://mp.weixin.qq.com/s/RZUO8Nws6TSsxCQWQ93W8Q',
							creatTime: '16:01',
						},
					]
				},
				
			],
			list: ['家政','教育','文化','旅游','事业','健康','公益','理财'],
			services: [{
				id: 1,
				name: '家政',
				img: require('../../static/service/1.png')
			},{
				id: 2,
				name: '教育',
				img: require('../../static/service/2.png')
			},
			{
				id: 3,
				name: '文化',
				img: require('../../static/service/3.png')
			},
			{
				id: 4,
				name: '旅游',
				img: require('../../static/service/4.png')
			},
			{
				id: 5,
				name: '事业',
				img: require('../../static/service/5.png')
			},
			{
				id: 6,
				name: '健康',
				img: require('../../static/service/6.png')
			},{
				id: 7,
				name: '公益',
				img: require('../../static/service/7.png')
			},
			{
				id: 8,
				name: '理财',
				img: require('../../static/service/8.png')
			}
			],
			}
	},
	computed:{
		tabList: function() {
			let catName = this.services[this.currentIndex].name;
			return this.tabLists && this.tabLists.find(item => item.name === catName)
		}
	},
	methods:{
		tabSelect(id) {
			this.TabCur = id;
		},
		toArticle(link){
			window.location.href = link;
		}
	},
	onLoad(option) {
		this.currentIndex = +option.state || 0;
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f8f8f8;
}
.container_tab {
  	display: flex;
  	background-color: linear-gradient( 135deg, #FDD819 10%, #E80505 100%);
  	.container_item {
  		flex:1;
  		display: flex;
  		flex-direction: column;
  		justify-content: center;
  		align-items: center;
  		background-color: white;
  		height: 28px;
  		padding: 0 5px;
  		position: relative;
  		z-index: 10;
  		color: #303133;
		&.current{
			color: $base-color;
			&:after{
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
  		.item_title {
  			font-size: 28upx;
  			font-family: "Microsoft YaHei"；
  			&:hover {
  				color: #E80505;
  			}
  		}
  	}
  }
  .message_header {
  	margin-top: 10upx;
  	padding: 0 10upx;
  	width: 100%;
  	height: 100%;
  	display: flex;
  	align-items: center;
  	height: 80upx;
  	line-height: 80upx;
	.item_img {
		width: 52upx;
		height: 52upx;
		margin-right: 10upx;
	}
  	.title_img {
  		display: inline-block;
  		width: 4px;
  		height: 30upx;
  		border-radius: 5px;
  		background-color: #E80505;
  		margin-right: 12upx;
  	}
  }
  .message_list {
	  .message_list_item {
		  background-color: white;
		  padding: 6upx;
		  box-sizing: border-box;
		  display: flex;
		  border: 1px solid #F8f8f8;
		  margin-top: 10upx;
		 .message_list_img{
			width: 180upx;
			height: 180upx;
			border-radius: 10upx; 
			margin-right: 20upx;
		 }
		 .message_list_one {
			 padding: 20upx;
			 flex: 1;
		 	.message_list_title {
				font-size: 30upx;
				color: #333;
			}
			.message_list_content {
				font-size: 26upx;
				color: #666;
			}
		 } 
	  }
  }
</style>
